import * as React from "react";
import { IMobileRegistryEntry, IQRCodeModalOptions } from "@walletconnect/types";
import {
  isIOS,
  formatIOSMobile,
  saveMobileLinkInfo,
  getMobileLinkRegistry,
} from "@walletconnect/utils";

import { DEFAULT_BUTTON_COLOR, WALLETCONNECT_CTA_TEXT_ID } from "../constants";

import { MOBILE_REGISTRY } from "../assets/registry";

// eslint-disable-next-line @typescript-eslint/no-unused-vars
import ConnectButton from "./ConnectButton";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import WalletButton from "./WalletButton";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import WalletIcon from "./WalletIcon";
import { TextMap } from "../types";

interface MobileLinkDisplayProps {
  qrcodeModalOptions?: IQRCodeModalOptions;
  text: TextMap;
  uri: string;
}

const GRID_MIN_COUNT = 5;
const LINKS_PER_PAGE = 12;

function formatHotcoinMobile(uri: string, entry: IMobileRegistryEntry) {
  // const encodedUri: string = encodeURIComponent(uri);
  return uri;
}

function MobileLinkDisplay(props: MobileLinkDisplayProps) {
  const ios = isIOS();
  const whitelist =
    props.qrcodeModalOptions && props.qrcodeModalOptions.mobileLinks
      ? props.qrcodeModalOptions.mobileLinks
      : undefined;
  const links = getMobileLinkRegistry(MOBILE_REGISTRY, whitelist);
  return (
    <div>
      <p id={WALLETCONNECT_CTA_TEXT_ID} className="walletconnect-qrcode__text">
        {props.text.connect_mobile_wallet}
      </p>
      <div className="walletconnect-connect__buttons__wrapper">
        {links.map((entry: IMobileRegistryEntry) => {
          const { color, name, shortName, logo } = entry;
          const href = ios ? formatIOSMobile(props.uri, entry) : formatHotcoinMobile(props.uri, entry);
          const handleClick = React.useCallback(() => {
            saveMobileLinkInfo({
              name,
              href,
            });
          }, []);
          return <WalletButton
            color={color}
            href={href}
            name={name}
            logo={logo}
            onClick={handleClick}
          />;
        })}
      </div>
    </div>
  );
}

export default MobileLinkDisplay;
